import {PureComponent} from "react";
import {Link, Navigate, NavLink, Route, Routes, useNavigate, useRoutes} from "react-router-dom";
import {Home} from "./pages/home/Home";
import {Profile} from "./pages/Profile";
import {Login} from "./pages/Login";
import {NotFound} from "./pages/NotFound";
import {HomeRecommend} from "./pages/home/HomeRecommend";
import {HomeRanking} from "./pages/home/HomeRanking";
import {Category} from "./pages/Category";
import {Mall} from "./pages/Mall";
import HomeSong from "./pages/home/HomeSong";
import Detail from "./pages/Detail";
import User from "./pages/User";
import routes from "./router";
import Star from "./Star";

function App() {
    const navigate = useNavigate();

    function navigateTo(path) {
        navigate(path)
    }

    return (
        <div className="app">
            {/*<div className="header">*/}
            {/*    <span>header</span>*/}
            {/*    <div>*/}
            {/*        /!*NavLink相比Link多了对应页加active类名*!/*/}
            {/*        /!*<NavLink to='/home'>首页</NavLink>*!/*/}
            {/*        /!*<NavLink to='/profile'>档案</NavLink>*!/*/}

            {/*        /!*NavLink添加自定义类名和style的方法*!/*/}
            {/*        <NavLink to='/home' className={({isActive}) => isActive ? 'link-active' : ''}>首页</NavLink>*/}
            {/*        <NavLink to='/profile' style={({isActive}) => ({color: isActive ? 'red' : ''})}>档案</NavLink>*/}
            {/*        <NavLink to='/login'>登录</NavLink>*/}
            {/*        <button onClick={() => navigate('/category')}>分类</button>*/}
            {/*        <button onClick={() => navigate('/mall')}>商城</button>*/}
            {/*        <NavLink to="/user?name=zc&age=18">用户</NavLink>*/}
            {/*    </div>*/}
            {/*    <hr/>*/}
            {/*</div>*/}
            {/*<div className="content">*/}
            {/*    /!*<Routes>*!/*/}
            {/*    /!*    /!*这样写没有锚点符号*!/*!/*/}
            {/*    /!*    /!*<Route path="/" element={<Home/>}/>*!/*!/*/}
            {/*    /!*    <Route path="/" element={<Navigate to="/home"/>}/>*!/*/}
            {/*    /!*    <Route path="/home" element={<Home/>}>*!/*/}
            {/*    /!*        /!*子路由配置(嵌套路由)*!/*!/*/}
            {/*    /!*        <Route path="/home" element={<Navigate to="/home/recommend"/>}/>*!/*/}
            {/*    /!*        <Route path="/home/recommend" element={<HomeRecommend/>}/>*!/*/}
            {/*    /!*        <Route path="/home/ranking" element={<HomeRanking/>}/>*!/*/}
            {/*    /!*        <Route path="/home/song" element={<HomeSong/>}/>*!/*/}
            {/*    /!*    </Route>*!/*/}
            {/*    /!*    <Route path="/profile" element={<Profile/>}/>*!/*/}
            {/*    /!*    <Route path='/login' element={<Login/>}/>*!/*/}
            {/*    /!*    <Route path="/category" element={<Category/>}/>*!/*/}
            {/*    /!*    <Route path="/mall" element={<Mall/>}/>*!/*/}
            {/*    /!*    /!*路由传参写法*!/*!/*/}
            {/*    /!*    <Route path="/detail/:id" element={<Detail/>}/>*!/*/}
            {/*    /!*    <Route path="/user" element={<User/>}/>*!/*/}
            {/*    /!*    /!*404页面写法*!/*!/*/}
            {/*    /!*    <Route path='*' element={<NotFound/>}/>*!/*/}
            {/*    /!*</Routes>*!/*/}
            {/*    /!*等同于配置*!/*/}
            {/*    {useRoutes(routes)}*/}
            {/*    <hr/>*/}
            {/*</div>*/}
            {/*<div className="footer">*/}
            {/*    <span>footer</span>*/}
            {/*    <hr/>*/}
            {/*</div>*/}
            <Star/>
        </div>
    )
}

export default App